<template>
  <div class="box">
    <h1><font color="white">Login</font></h1>
    <table>
      <tr>
        <td><font color="white">用户名 : </font></td>
        <td>
          <input
            type="text"
            placeholder="userName"
            v-model="loginData.username"
          /><br />
        </td>
      </tr>
      <tr>
        <td><font color="white">密码 : </font></td>
        <td>
          <input
            type="password"
            placeholder="passWord"
            v-model="loginData.password"
          />
        </td>
      </tr>
    </table>
    <br />
    <table>
      <tr>
        <td><button @click="login()" class="button">登录</button></td>
        <td>
          &nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;
          &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;
        </td>
        <td>
          <button class="button">
            <a href="./sign.html"><font color="white">注册</font></a>
          </button>
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
import { loginApi, details } from "@/util/usersApi";
import store from "@/store";
import router from "@/router";

export default {
  name: "Login",
  data() {
    return {
      loginData: {
        username: "",
        password: "",
      },
    };
  },

  methods: {
    login() {
      console.log(this.loginData);
      // 获取id
      loginApi(this.loginData).then((res) => {
        console.log(res.data.data);
        let id = res.data.data.userId;

        // 获取信息
        details({ id: id }).then((res) => {
          store.commit("setUserInfo", res.data.data);
          console.log("用户信息", store.state.userInfo);
          router.push({
            path: "/",
          });
        });
      });
    },
  },
};
</script>

<style>
body {
  margin: 0;
  padding: 0;
  background-image: url("http://114.116.112.52:8080/data/img/ct.jpg");
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: 0px -50px;
}
.box {
  width: 300px;
  padding: 40px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #00000068;
  text-align: center;
}
h1 {
  color: #ffffff;
  text-transform: uppercase;
  font-weight: 500;
}
.button {
  border: 0;
  font-size: 17px;
  background: none;
  display: block;
  margin: 20px auto;
  text-align: center;
  border: 2px solid #ffffff;
  padding: 14px 20px;
  outline: none;
  color: #ffffff;
  border-radius: 24px;
  transition: 0.25s;
  cursor: pointer;
}
.button:hover {
  background-image: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);
  font-size: x-large;
}

/* 实现跳转页面去掉下划线 */
form button {
  outline: 0;
  background-color: white;
  border: 0;
  padding: 13px 15px;
  color: #ffffff;
  border-radius: 3px;
  width: 250px;
  cursor: pointer;
  font-size: 18px;
  position: relative;
}

form button:hover {
  background-color: rgba(255, 255, 255, 0.4);
}

a {
  text-decoration: none;
}
</style>